import Taro, { getCurrentInstance } from "@tarojs/taro";
import React, { useState, useEffect } from "react";
import { View, Text } from "@tarojs/components";
import { getSystemMessage, readSystemMessage } from "./api";
import "taro-ui/dist/style/components/input.scss";
import css from "./index.module.less";

export default function Index() {
  const { id } = getCurrentInstance().router.params;
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    getSystemMessage(id).then((res) => {
      if (res.code === 200) {
        setMessages(res.data);
        const data = res.data;
        for (let i = 0; i < data.length; i++) {
          const element = data[i];
          const m = element.message;
          readSystemMessage(m.id);
        }
      }
    })
  }, [])
  return (
    <View className={css.app}>
      {messages.length === 0? "" : messages.map((message) => {
        return (
          <View className={css.list}>{message.article === null? "" :message.message.report === 0?
            `你举报的文章<<${message.article.title}>>,`:
            `你举报的文章<<${message.article.title}>>举报失败, 因为:`}
            <Text className={css.reason}>{message.message.content}</Text>
          </View>
        )
      })}
    </View>
  );
}
